import React, { useRef } from 'react';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import {Image} from 'antd';
import '@umijs/max';
import { getUserList } from '@/services/api/user';

const User: React.FC = () => {
  // 表格列配置
  const columns = [
    {
      title: 'userId',
      dataIndex: 'id',
      valueType: 'text',
      hideInSearch: true, // 隐藏搜索项
    },
    {
      title: '用户名',
      dataIndex: 'username',
      valueType: 'text',
      copyable: true
    },
    {
      title: '头像',
      dataIndex: 'avatar_url',
      valueType: 'image',
      hideInSearch: true,
      render: (_: any, record: { avatar_url: string; }) => (
        <Image 
          width={50} height={50}
          src={record.avatar_url} 
          fallback="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
        />
      ),
    },
    {
      title: '权限',
      dataIndex: 'is_admin',
      valueEnum: {
        '0': {
          text: '普通用户',
        },
        '1': {
          text: '管理员',
        },
      },
    },
    {
      title: '创建时间',
      sorter: true,
      dataIndex: 'createAt',
      valueType: 'dateTime',
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '更新时间',
      sorter: true,
      dataIndex: 'updateAt',
      valueType: 'dateTime',
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action?.handleEdit?.(record.id);
          }}
        >
          编辑
        </a>,
        <a
          key="del"
          onClick={() => {
            action?.handleDel?.(record.id);
          }}
        >
          删除
        </a>
        
      ],
    },
  ];


  return (
    <PageContainer>
      <ProTable
        headerTitle="用户列表"
        columns={columns}
        request={async (params, sort, filter) => {
          // params 为：{ pageSize: 10, current: 1, keyWord: 'xxxx' }
          const {data: userList} = await getUserList(params);
          return {
            data: userList,
            success: true,
            // total: userList.length,
          };
        }}
        search={{ labelWidth: 'auto' }}
        pagination={{
          pageSize: 10,
          onChange: (page) => console.log(page),
        }}
        
      >


      </ProTable>
    </PageContainer>
  );
};
export default User;
